<template>
  <div v-if="readonly" class="itemNames">
    <span v-for="i in names" :key="i">{{ i }}</span>
  </div>
  <el-cascader
    v-else
    v-model="chioseKey"
    :options="comList"
    :placeholder="placeholder"
    :props="props"
    :clearable="clearable"
    :disabled="disabled"
    class="el-input"
    @change="handleChange"
  />
</template>

<script>
import { GetTreeItems, GetNameList } from '@/api/base/company'
export default {
  props: {
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '选择公司'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
    isChoiceEnd: {
      type: Boolean,
      default: false
    },
    parentId: {
      type: String,
      default: null
    },
    value: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      comList: [],
      chioseKey: null,
      cache: {},
      names: [],
      props: {
        multiple: false,
        emitPath: false,
        checkStrictly: true,
        value: 'Id',
        label: 'Name',
        children: 'Children'
      }
    }
  },
  watch: {
    parentId: {
      handler(val) {
        this.reset()
      },
      immediate: true
    },
    value: {
      handler(val) {
        if (val == null) {
          this.chioseKey = null
        } else {
          this.chioseKey = typeof (val) === 'number' ? val.toString() : val
        }
        this.chioseKey = val
        if (this.readonly && val) {
          this.reset()
        } else {
          this.loadLabel()
        }
      },
      immediate: false
    },
    isChoiceEnd: {
      handler(val) {
        this.props.checkStrictly = val === false
      },
      immediate: false
    },
    isMultiple: {
      handler(val) {
        this.props.multiple = val
      },
      immediate: false
    }
  },
  methods: {
    reset() {
      if (this.readonly) {
        if (this.value == null) {
          this.names = []
          return
        } else if (this.isMultiple && this.value.length !== 0) {
          this.loadNames(this.value)
        } else if (this.isMultiple === false) {
          this.loadNames([this.value])
        } else {
          this.names = []
        }
      } else {
        this.loadTree()
      }
    },
    loadLabel() {
      let label = null
      if (this.value != null && this.value !== '') {
        if (this.isMultiple && Array.isArray(this.value)) {
          label = this.formatName(this.value)
        } else {
          label = this.cache[this.value].Name
        }
      }
      this.$emit('update:label', label)
    },
    formatName(list) {
      let name = ''
      list.forEach(c => {
        name = ',' + this.cache[c].Name
      })
      return name.substring(1)
    },
    async loadTree() {
      const res = await GetTreeItems(this.parentId)
      this.props.checkStrictly = this.isChoiceEnd === false
      this.props.multiple = this.isMultiple
      this.cache = {}
      res.forEach((c) => {
        this.cache[c.Id] = c
        this.format(c)
      })
      this.comList = res
      if (this.value !== null) {
        this.chioseKey = typeof (this.value) === 'number' ? this.value.toString() : this.value
      }
      this.loadLabel()
    },
    async loadNames(ids) {
      this.names = await GetNameList(ids)
      this.$emit('update:label', this.names.join(','))
    },
    format(row) {
      if (row.Children) {
        if (row.Children.length === 0) {
          row.Children = null
        } else {
          row.Children.forEach((c) => {
            this.cache[c.Id] = c
            this.format(c)
          })
        }
      }
    },
    handleChange(val) {
      const e = {
        isMultiple: this.isMultiple,
        value: null,
        item: null
      }
      let label = null
      if (this.isMultiple) {
        e.value = val
        e.item = val.map(c => this.cache[c])
        label = this.formatName(val)
      } else if (val) {
        e.value = [val]
        e.item = [this.cache[val]]
        label = this.cache[val].Name
      } else {
        e.value = []
      }
      this.$emit('update:label', label)
      this.$emit('input', val)
      this.$emit('change', e)
    }
  }
}
</script>

  <style scoped>
  .itemNames {
    display: inline-block;
    line-height: 20px;
  }
  .itemNames span{
    padding: 5px;
  }
  </style>
